<template>
	<view class="all-main">
		<u-loading-page :loading="loadding" loading-mode="semicircle" loading-text="Hello Pro"></u-loading-page>
		<view v-if="!loadding" class="main">
			<view class="top">
				<u-tabs :list="orderState" :scrollable="false" @change="tabsChange"></u-tabs>
			</view>
			<view v-if="orderData.length > 0" class="lists">
				<view class="items" v-for="(item, index) in orderData" :key="index">
					<view class="item-title">
						<u--text v-if="item.user_id != userinfo.id" prefixIcon="bag" bold iconStyle="font-size: 19px" :text="item.mobile"></u--text>
						<u--text v-else prefixIcon="bag" iconStyle="font-size: 19px" :text="item.order_num"></u--text>
						<text v-if="item.pay_state == 1" class="pay_state red">待收货</text>
						<text v-else-if="item.pay_state == 2" class="pay_state green">已完成</text>
					</view>
					<u-line></u-line>
					<view class="pro-con">
						<view class="left">
							<image :src="item.image" @click="detail(item)"></image>
						</view>
						<view class="right">
							<view class="pro_titles" @click="detail(item)">
								{{item.name}}
							</view>
							<view class="pro_info" @click="detail(item)">
								<view class="pro_title">
									{{item.single_price}}
								</view>
								<view class="pro_price">
									<text>共{{item.number}}台</text>
								</view>
							</view>
							<view class="pro_total" @click="detail(item)">
								<view class="total_number">
									合计
								</view>
								<view class="total_money">
									<text>{{item.total_price}}</text>
								</view>
							</view>
							<view class="pro_info">
								<view class="pro_price">
									下单时间
								</view>
								<view class="pro_price">
									<text>{{item.create_time_txt}}</text>
								</view>
							</view>
							<view v-if="item.pay_state == 2" class="pro_info">
								<view class="pro_price">
									{{type==1?'收货时间':'发货时间'}}
								</view>
								<view class="pro_price">
									<text>{{item.finish_time_txt}}</text>
								</view>
							</view>
							<view v-if="type==1 && item.pay_state < 2" class="pro_info">
								<view class="pro_price"></view>
								<view class="pro_price">
									<view class="cenBtn" @click="cancelOrder(item)">
										取消订单
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<u-empty v-else mode="order" icon="/static/Empty/order_null.png"></u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userinfo: {},
				loadding: false,
				orderState: [{
					name: '待收货'
				}, {
					name: '已完成'
				}],
				value2: 2,
				orderData: [],
				pay_state: 1,
				page: 1,
				page_size: 6,
				bottom: true,
				total: 0,
				type: 1,
			}
		},
		onLoad(e) {
			this.type = e.type
			this.userinfo = uni.getStorageSync('userinfo');
			this.loadData()
		},
		onShow() {
			this.page = 1
			this.bottom = true
			this.loadData()
		},
		//下拉刷新
		onReachBottom() {
			if (this.bottom == true) {
				this.page++
				this.loadData()
			}
		},
		methods: {
			// 头部标签选择
			tabsChange(e) {
				if (e.index == 0) {
					this.pay_state = '1'
				} else {
					this.pay_state = e.index + 1
				}
				this.page = 1
				this.bottom = true
				this.orderData = []
				this.loadData()
			},
			// 获取订单数据
			async loadData() {
				uni.showLoading({
					title: '加载中'
				});
				const {
					data: res
				} = await this.$myHttp5({
					url: 'Order/getOrderList',
					data: {
						type: this.type,
						pay_state: this.pay_state,
						page: this.page,
						page_size: this.page_size
					},
					header: {
						'token': this.userinfo.token
					}
				});
				uni.hideLoading()
				if (res.code == 1) {
					if (res.data !== undefined && res.data !== null && res.data.length >
						0) {
						if (this.page == 1) {
							this.orderData = res.data
						} else {
							this.orderData = [...this.orderData, ...res.data]
						}
						if (res.data.length < this.page_size) {
							this.bottom = false
						}
					} else {
						this.bottom = false
					}
				} else {
					this.bottom = false
				}
			},
			// 订单详情
			detail(item) {
				uni.navigateTo({
					url: '/pages/version5/index/shop/order/detail?id=' + item.id + '&type=' + this.type
				})
			},
			// 取消订单
			cancelOrder(item) {
				var that = this
				uni.showModal({
					title: '提示',
					content: '确定要取消订单吗？',
					success: function(res) {
						if (res.confirm) {
							that.cancelOrderFun(item)
						}
					}
				});
			},
			// 取消订单 - 提交
			async cancelOrderFun(item) {
				var that = this
				uni.showLoading({
					title: '加载中'
				});
				const {
					data: res
				} = await this.$myHttp5({
					url: 'Order/cancelOrder',
					data: {
						order_id: item.id
					},
					header: {
						'token': this.userinfo.token
					}
				});
				uni.hideLoading()
				uni.showToast({
					title: res.msg,
					icon: "none"
				})
				if (res.code == 1) {
					setTimeout(function() {
						that.loadData()
					}, 1500)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f3f4f6;
	}

	.all-main {
		.main {
			padding: 0 20rpx;

			.lists {
				margin: 20rpx 0;
				padding-bottom: 100rpx;

				.items {
					padding: 0 30rpx;
					background-color: #ffffff;
					border-radius: 20rpx;
					margin-bottom: 20rpx;

					.item-title {
						width: 100%;
						display: block;
						font-size: 26rpx;
						padding: 20rpx 0;
						display: flex;
						justify-content: space-between;

						.pay_state {
							font-size: 24rpx;
							padding-top: 6rpx;
							font-weight: bold;
						}

						.gray {
							color: #c8c9cc;
						}

						.red {
							color: #fa3534;
						}

						.green {
							color: #19be6b;
						}
					}

					.pro-con {
						padding: 20rpx 0;
						display: flex;
						justify-content: space-between;

						.left {
							width: 30%;
							display: flex;
							align-items: center;

							image {
								border-radius: 10rpx;
								width: 160rpx;
								height: 160rpx;
							}
						}

						.right {
							width: 68%;

							.pro_titles {
								padding-top: 10rpx;
								font-size: 28rpx;
								font-weight: bold;
							}

							.pro_info {
								font-size: 24rpx;
								padding-top: 20rpx;
								display: flex;
								justify-content: space-between;

								.pro_title {
									
								}

								.pro_price {
									.cenBtn {
										padding: 10rpx 20rpx;
										border: 1px solid #fa3534;
										border-radius: 10rpx;
										background-color: #fa3534;
										color: #ffffff;
										font-size: 24rpx;
									}
								}
							}

							.pro_total {
								font-size: 24rpx;
								text-align: right;
								padding-top: 20rpx;
								display: flex;
								justify-content: space-between;

								.total_money {
									color: #fa3534;
									font-weight: bold;
								}
							}
						}
					}

					.operate {
						padding: 0 0rpx 20rpx 20rpx;
						height: 60rpx;

						.buyBtn {
							float: right;
							margin-left: 30rpx;
							padding: 10rpx 20rpx;
							border-radius: 20rpx;
							background-color: #fa3534;
							color: #ffffff;
							font-size: 28rpx;
						}

						.cancel {
							float: right;
							padding: 10rpx 20rpx;
							border-radius: 20rpx;
							background-color: #c8c9cc;
							color: #ffffff;
							font-size: 28rpx;
						}
					}
				}
			}
		}
	}
</style>